<template>
        <swiper :options="swiperOption" class="header-swiper">
            <swiper-slide v-for="(swiper,id) in swiperLists" :key="id">
                <img :src="swiper.imgUrl">
              </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
</template>

<script>
export default {
    data(){
        return{
          swiperLists:[
            {
              id:"01",
              imgUrl:require("@/assets/img/swiper1.png")
            },
            {
              id:"02",
              imgUrl:require("@/assets/img/swiper2.png")
            },
            {
              id:"03",
              imgUrl:require("@/assets/img/swiper3.png")
            }
          ],
          swiperOption:{
              pagination: {
              el: '.swiper-pagination'
            },
            loop:true
          },
          swiperSlides: [1, 2, 3]
        }
    }
}
</script>
<style scoped>

/*在3g网中防止掉块情况出现*/
.header-swiper{
  background: #ccc;
  height: 0;
  padding-bottom: 37%;/*防止掉块*/
}

.header-swiper img{
  width: 100%;
  height: 9rem;
}

/*样式穿透，可以修改源代码的样式*/
.header-swiper >>> .swiper-pagination-bullet-active{
  background: #fff;
}
</style>